<script setup lang="ts">
import { HeadTag } from "@/interface/menu";
import { useGlobalStore } from "@/store/globalStore";
import { useMenuStore } from "@/store/menuStore";

const menuStore = useMenuStore();
const router = useRouter();
const globalStore = useGlobalStore()

const rightClick = () => { };

const deleteTag = (item: HeadTag) => {
  menuStore.deleteDynamicTag(item.key)
};

const handleClickTag = (item: HeadTag) => {
  router.push(item.key as string);
  menuStore.selectedKeys = [item.key as string];
};

onMounted(() => {
  //初始化动态标签
})

</script>

<template>
  <div class="p-2 shadow-md flex flex-wrap relative z-10 dark:border-gray-600 dark:border-b-[1px] dark:dark:bg-darkBg gap-1 max-sm:pt-0">
    <a-tag class="flex items-center cursor-pointer select-none h-7 text-md w-fit"
      :class="item.isActive ? 'text-white' : globalStore.darkMode === '0' ? ' text-gray-500' : 'text-gray-300'"
      :color="item.isActive ? globalStore.themeColor : ''" :closable="item.enableClose" @contextmenu.prevent="rightClick"
      @close.stop="deleteTag(item)" @click="handleClickTag(item)" v-for="item in menuStore.dynamicTagList">{{ item.title
      }}
    </a-tag>
  </div>
</template>

<style scoped></style>
